<template>
	<view class="zlk-bg">
        
		<!-- 顶部标题栏END -->
		<view class="bg-white  padding-left-xl " style="padding-top: 300rpx;padding-left: 32upx;">
			<view class="sl-title text-xxl text-black text-bold">请登录</view>
		</view>
		<view class="bg-white " style="padding-top: 86upx; padding-left: 32upx;padding-right: 32upx;">
			<view class="cu-form-group flex">
				<text class="cuIcon-my icon_unlock " style="font-size: 55rpx;color:#357efe;"></text>
				<input class="margin-left-sm" placeholder="请输入用户名" v-model="phone" maxlength="11" />
                <text @click="close" v-show="phone.length >0" class="block cuIcon-close"></text>
			</view>
            <view class="cu-form-group flex">
                <text class="cuIcon-unlock icon_unlock " style="font-size: 55rpx;color:#357efe;"></text>
            	<input style="border:none!important;"  :type="passwodrinput" class="margin-left-sm" placeholder="请输入密码" v-model="password" maxlength="11" />
                <text @click="close1" v-show="password.length >0" class="block cuIcon-close"></text>
                <text  v-show="passwordtype"  @click="passwordtypes"   class="block cuIcon-attention"></text>
                <text v-show="!passwordtype" @click="passwordtypes"  class="block cuIcon-attentionforbid"></text>
            </view>
            <view class="jzmm padding-sm flex align-center">
                <view class="dxk margin-right-sm" @click="check_isshow_icon">
                    <text :class="isshow_icon == true? 'cuIcon-check':''"   class=" text-blue"></text>
                </view>
                <text>记住密码</text>
            </view>
		</view>
        
		<view   style="padding-top: 80upx;padding-left: 32upx;padding-right: 32upx;">
			<button class="bg flex align-center justify-center" @tap="submit">登录</button>
		</view>
        <!-- 我是背景图 -->
        <view class="bj_wjj">
            <image style="width: 100%;height: 100%;" src="@/static/img/login_wjx.png" mode=""></image>
        </view>
	</view>
</template>

<script>
	var util = require("../../common/util");
	var api = require("../../common/api");
	export default {
		data() {
			return {
                state:"",
                isshow_icon:true,
				phone: '',
				password:"",
                isclose:false,
                passwodrinput:"password",
                passwordtype:false
			}
		},
		onLoad() {
            this.getusername()
        },
       
		methods: {
            getusername(){
               var that = this
		
              uni.getStorage({
                    key: 'username',
                    success: function (res) {
                        let username = res.data
                        that.phone = username
                    }
                });
                uni.getStorage({
                      key: 'password',
                      success: function (res) {
                          let password = res.data
                          that.password = password
                      }
                  });
									// 方便调试
									// this.phone ="wy@1"
									//  that.password ="wy@123"
            },
            check_isshow_icon(){
              this.isshow_icon = !this.isshow_icon  
              console.log(this.isshow_icon)
            },
			// 登录
			submit() {
                console.log('状态',this.state)
                if(this.state == 1){
                    uni.navigateTo({
                           	url: '/pages/home/home',
                           })
                    return 
                }
                
                var that = this
                util.request(
                	api.apis.login,
                	{
                        app:0,
                        password:this.password,
                        grant_type:"password",
                        username:this.phone ,
                        captcha:""
                    },
                	"POST",
                     {
                        'content-type':"application/x-www-form-urlencoded",
                        'Authorization': 'Basic cmVucmVuaW86cmVucmVuaW8='
                    }
                ).then(res=>{
                	console.log(res)
                    if(res.code == 0){
                        this.state = 1
                        if(this.isshow_icon == true){
                             uni.setStorage({key: 'password',data:this.password});
                        }else{
                            uni.removeStorage({key: 'password'});
                        }
                        uni.setStorage({
                            key:"token",
                            data: res.access_token,
                            success: function () {
                               that.login(res.access_token)
                               console.log('success');
                           }
                        })
                        uni.setStorageSync('token',res.access_token)
                        uni.setStorageSync('username',this.phone)
                    }else{
                        uni.showToast({
                            icon:"none",
                            title:res.msg
                        })
                    }
                    return
                	
                }).catch(rej=>{
                	console.log(rej)
                    return uni.showToast({
                        title:rej.msg,
                        icon:"none"
                    })
                })
                 return
				
			},
            login(token){
               util.request(
                  api.apis.user_info,
                  {},
                  "GET",
                  {
                    'content-type':"application/x-www-form-urlencoded",
                    'Authorization':'Bearer' + token
                  }
               ).then(res=>{
                   if(res.code == 0){
                       uni.showToast({
                           title:"登陆成功",
                           icon:"none"
                       })
                       setTimeout(res=>{
                           uni.navigateTo({
                           	url: '/pages/home/home',
                           })
                       },500)
        
                   }
               })
            },
            passwordtypes(){
              this.passwordtype = !this.passwordtype
              if(this.passwodrinput == "password"){
                  this.passwodrinput = 'text'
              }else{
                  this.passwodrinput = "password"
              }
            },
            
             close1(){
                 this.password  = ""
             },
			close(){
                this.phone = ""
            },
		}
	}
</script>

<style lang="scss">
	.bj_wjj{
        width: 728rpx;
        height: 254rpx ;
        position: absolute;
        bottom: 50rpx;
    }
    
    .dxk{
        width: 30rpx;
        height: 30rpx;
        border:2rpx solid #6AAADA;
        border-radius: 2rpx;
        
    }
    
    
	.view-empower{
		padding: 32upx 24upx;
	}
	.img-choose{
		width: 44upx;
		height: 44upx;
	}
	.text-empower{
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
	}
	.text-link{
		color:#6AAADA;
	}
	.sl-title {
		display: inline-block;
		size: a2;
	}

	.cu-form-group {
		width: calc(100% - 20rpx);
		margin: 0 auto;
		padding: 0;
		border-top: none;
		border-bottom: 1px solid rgba(225, 228, 234, 1);
	}

	.bg {
		background: #357efe;
		border-radius: 5px;
		height: 98upx;
		color: #FFFFFF;
		text-align: center;
        box-shadow: 10rpx 5rpx 30rpx  #357efe;
	}

	.img {
		width: 76px;
		height: 35px;
	}


	.title {
		width: 100%;
		height: 88rpx;
		background-color: white;
		display: flex;
		border-bottom: 1rpx solid #FFFFFF;
		color: #5D5D5D;
		font-size: 36rpx;
		line-height: 88rpx;
	}

	
</style>
